/**
Theme Name: Fresh HTML Template
Theme Url: http://themeforest.net/user/raytemplates
Author: RayTemplates
Author Url: www.raytemplates.com
Date: January 05, 2014
***/

/**
 * Table of Contents:
 *
 * 1.0 - Reset
 * 2.0 - Repeatable Patterns
 * 3.0 - Layout Structure
 * 4.0 - Header
 *   4.1 - Logo
 *   4.2 - Site Navigation [see css/nav.css]
 *   4.3 - Social Icons
 *
 * 5.0 - Slider
 * 6.0 - Content
 *   6.1 - Call to Action Wrap (Fixed and Wide)
 *   6.2 - Icon Box (Colorful/White Content box to list any featured services.)
 *   6.3 - Recent Works
 *   6.4 - Recent Posts
 *   6.5 - Featured Product Wrap
 *   6.6 - Pages
 *   	6.6.1 - Page Title Wrap
 *      6.6.2 - 404 Error Page
 *      6.6.3 - Blog Page [see css/blog.css]
 *      6.6.4 - Contact Page
 *
 * 7.0 - Footer
 * 8.0 - Media Queries
 *
 *
 * -----------------------------------------------------------------------------
 */


/***********************
***** 1.0 Reset *********
*************************/

	* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
	*:focus {outline: none;}
	:-moz-placeholder { color: #fff;}
	::-webkit-input-placeholder {color: #fff;}
	img {max-width: 100%;}
	
	html {font-size: 100%; background:#333; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
	
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	nav,
	section,
	summary {
		display: block;
	}
	
	audio,
	canvas,
	video {
		display: inline-block;
	}
	
	[hidden] { display: none; }
	
	html,
	button,
	input,
	select,
	textarea {
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
	}
	
	html{
	  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
	}
	body { 
		font: 0.813em/1.7em 'Open Sans', Arial, Helvetica, sans-serif; color: #929393; margin: 0; }
	
	a {
		color: #2dbdbd; text-decoration:none; 
		-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; 
		-ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
	  }
	  
	a:hover{ color:#ccc;}
	
	a:focus {
		outline: thin dotted;
	}
	
	
	/** Heading Styles / Typography **/
	
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		clear: both;
		line-height: 1.3em;
		-webkit-font-smoothing: antialiased;
	}
	h1 { font-size: 1.8em; line-height:1.250em; display:block; margin: 0.625em 0; color:#333; font-weight:700;}
	h2 {font-size:1.6em; margin: 1em 0; color:#333; font-weight:200; line-height:1.3em; position:relative; padding:0.4em 0; }	
	h3 {font-size: 1.4em; line-height:1.3em; margin: 1em 0; font-weight:300 !important; position:relative; color:#333;}
	h4 {font-size: 1.2em; margin: 1.3em 0; font-weight:700;  }	
	h5 {font-size: 0.9em; margin: 1.2em 0; color:#ccc; text-transform:uppercase; font-weight:400; }	
	h6 {font-size: 0.9em; margin: 1em 0; text-transform:capitalize;}
	
	.text-lead{ font-size:1.2em; font-style:italic; color:#6CCECE; font-weight:700; }
	
	.center-title{ text-align:center !important; }
	
	
	/** Clear **/
	.clear{ clear:both; overflow:hidden; line-height:0; float:none; }
	.some_blank_space{ height:50px; clear:both; float:none; overflow:hidden; }
	
	
	/** Addresses styling not present in IE7/8/9, S5, Chrome **/	
	abbr[title] {
	    border-bottom: 1px dotted;
	}
	
	/** Addresses style set to 'bolder' in FF3+, S4/5, Chrome **/	
	b,
	strong {
	    font-weight: bold;
	}
	
	/** Addresses styling not present in S5, Chrome **/	
	dfn {
	    font-style: italic;
	}
	
	/** Addresses styling not present in IE6/7/8/9 **/	
	mark {
	    background: #ff0;
	    color: #000;
	}
	
	/** Addresses margins set differently in IE6/7 **/	
	p,
	pre {
	    margin: 1em 0 1.5em 0;
	    -webkit-font-smoothing: antialiased;
	}
	
	/*
	 * Corrects font family set oddly in IE6, S4/5, Chrome
	 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
	 */
	
	pre,
	code,
	kbd,
	samp {
	    font-family: monospace, serif; font-family: 'courier new', monospace; font-size: 1em;
	}
	
	/** Improves readability of pre-formatted text in all browsers **/	
	pre {
	    white-space: pre; white-space: pre-wrap; word-wrap: break-word;
	}
	
	/*
	 * 1. Addresses CSS quotes not supported in IE6/7
	 * 2. Addresses quote property not supported in S4
	 */
	
	q {
	    quotes: none;
	}
	
	/* 2 */
	
	q:before,
	q:after {
	    content: '';
	    content: none;
	}
	
	small {
	    font-size: 75%;
	}
	
	/*
	 * Prevents sub and sup affecting line-height in all browsers
	 * gist.github.com/413930
	 */
	
	sub,
	sup {
	    font-size: 75%;
	    line-height: 0;
	    position: relative;
	    vertical-align: baseline;
	}
	
	sup {
	    top: -0.5em;
	}
	
	sub {
	    bottom: -0.25em;
	}

	/*
	 * Addresses margins set differently in IE6/7
	 */
	
	dl,
	menu,
	ol,
	ul {
	    margin: 0;
	}
	
	dd {
	    margin: 0 0 0 40px;
	}
	
	/*
	 * Addresses paddings set differently in IE6/7
	 */
	
	menu,
	ol,
	ul {
	    padding: 0;
	    list-style:none; margin:0;
	}
	
	/*
	 * Corrects list images handled incorrectly in IE7
	 */
	
	nav ul,
	nav ol {
	    list-style: none;
	    list-style-image: none;
	}
	

	/*
	 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
	 * 2. Improves image quality when scaled in IE7
	 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
	 */
	
	img {
	    border: 0; /* 1 */
	    -ms-interpolation-mode: bicubic; /* 2 */
	}
	
	/*
	 * Corrects overflow displayed oddly in IE9
	 */
	
	svg:not(:root) {
	    overflow: hidden;
	}

	/*
	 * Addresses margin not present in IE6/7/8/9, S5, O11
	 */
	
	figure {
	    margin: 0;
	}
	
	
	/*
	 * Remove most spacing between table cells
	 */
	
	table {
	    border-collapse: collapse;
	    border-spacing: 0;
	}





/***************************************
***** 2.0 Repetable Patterns *********
****************************************/


	/* =====  Forms ===== */
	
	form { margin: 0; }
	fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
	}
	
	/*
	 * 1. Corrects color not being inherited in IE6/7/8/9
	 * 2. Corrects text not wrapping in FF3
	 * 3. Corrects alignment displayed oddly in IE6/7
	 */
	
	legend {
	    border: 0; /* 1 */
	    padding: 0;
	    white-space: normal; /* 3 */
	}
	
	button,
	input,
	select,
	textarea {
		margin:0; padding:0.5em; border:1px solid #e2e2e2; border-radius:2px; max-width:99%; color:#34afaf;
		/* Transition Effect */
		/* Transition Effect */
		-webkit-transition: all 0.10s ease-out; -moz-transition: all 0.10s ease-out; -o-transition: all 0.10s ease-out; 
		-ms-transition: all 0.10s ease-out; transition: all 0.10s ease-out;
	}
	
	.contact-form{ margin:35px 0 !important; }
	.contact-form textarea { width:99%; }
	
	label{ text-transform:uppercase; font-weight:700; margin:4px 0; display:inline-block; }
	
	/* Input Focus Style */
	input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus{
		-webkit-box-shadow: 0px 0px 2px #1FB4DD;
		-moz-box-shadow: 0px 0px 2px #1FB4DD;
		box-shadow:0px 0px 5px #1FB4DD;
		margin-left:2px;
		border: 1px solid #1FB4DD;	
	}
	
	button,
	input {
	
	}
	
	button, input[type=button], input[type=reset], input[type=submit] {
		border:none;
		display:inline-block; vertical-align:top; 
	 	padding:0.9em 2em; margin:10px 10px 10px 0;
	 	border-radius:3px; cursor: pointer; text-align:center;
	 	font-size:0.99em; font-weight:400; text-transform:uppercase; text-decoration:none;
	 	/* Box Shadow */
		-moz-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.33);
		-webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.33);
		box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.33);
	}
	
	button, input[type=button],
	input[type=submit] {
	 background-color:#333; color:#fff;
	}
	
	input[type=reset]{
	 background-color:#666; color:#fff;
	}
	
	button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover { background-color:#999; }

	/*
	 * Re-set default cursor for disabled elements
	 */
	
	button[disabled],
	input[disabled] {
	    cursor: default;
	}
	
	/** Align **/
	
	.align-left{ float:left; margin:0 30px 30px 0; }
	.align-right{ float:right; margin:0 0 30px 30px; }
	
	
	/* Blockquote */

	blockquote footer { background:none !important; padding:1em 0 0 0; color:#666; }
	blockquote footer:before { content:"-"; }
	
	input[type=checkbox], input[type=radio] {
	}
	
	input[type=search] {
	}
	
	/*
	 * Removes inner padding and search cancel button in S5, Chrome on OS X
	 */
	
	input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button {
	
	}
	
	/*
	 * Removes inner padding and border in FF3+
	 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
	 */
	
	button::-moz-focus-inner,
	input::-moz-focus-inner {
	}
	
	/* HR */	
	hr {
	  border-top: 1px dotted #e4e1e1;
	  color: #fff;
	  background-color: #fff;
	  height: 1px;
	  width:100%;
	  clear:both; margin:3em 0;
	}	 
	 
	 /* Arrows */
	 .more-arrow { display:inline-block; padding:0.5em 1.5em 0.5em 0; border:2px solid rgba(0,0,0,0); border-radius:2px; }
	 .more-arrow:after{ content: "\f178"; font-family:FontAwesome; }
	 
	 .more-arrow:hover{
	 	padding:0.5em 1.5em; border:2px solid rgba(0,0,0,0.1);
	 }
	 
	 .black-circle-arrow{ background:url(../images/circle-arrow.png) no-repeat right; }
	 .grey-circle-arrow{ background:url(../images/grey-circle-arrow.png) no-repeat right; }
	 .orange-circle-arrow{ background:url(../images/orange-circle-arrow.png) no-repeat right; }
	 
	 .black-circle-arrow,
	 .grey-circle-arrow,
	 .orange-circle-arrow{ position:absolute; display:inline-block; right:1.5em; top:0.8em; width:30px; height:31px; z-index:9999; }	 
	 .black-circle-arrow:hover, .grey-circle-arrow:hover, .orange-circle-arrow:hover { background-position:left; }
	 


/***********************
***** 3.0 Layout Structure *********
*************************/

	.wrapper {width: 100%; margin: 0 auto;}
	.content-skeleton{ max-width:980px; margin:auto; position:relative; clear:both; text-align:left;
		/* Transition Effect */
		-webkit-transition: all 0.4s ease-out;
		-moz-transition: all 0.4s ease-out;
		-o-transition: all 0.4s ease-out;
		-ms-transition: all 0.4s ease-out;
		transition: all 0.4s ease-out;
		}
	.container{ margin:60px 0; clear:both; overflow:hidden; }
	
	header,
	nav.primary,
	section.banner,
	section.content,
	section.page-content,
	footer {
		float: left;
		width: 100%;
		padding: 0;
		-webkit-transition: all 0.4s ease-out;
		-moz-transition: all 0.4s ease-out;
		-o-transition: all 0.4s ease-out;
		-ms-transition: all 0.4s ease-out;
		transition: all 0.4s ease-out;	
	}
	
	section.content{ clear:both; background-color:#fff; padding: 0 0 0 0; }


	
	
/***********************
***** 4.0 Header *********
*************************/

	header#page-header { 	
		background:#fff; z-index:9999; padding:0; min-height:99px; position:relative;	
		/* Box Shadow */
		-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.53);
		-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.53);
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.53);
	 }
	 
	
	/***********************
	******** 4.1 - Logo ****
	************************/
	 
	#logo, #socials { padding-top:1.6em; display:inline-block; }
	
	
	/***********************
	******** 4.2 - Site Navigation ****
	************************/
	
	/* please see css/nav.css */
	
	
	/***********************
	******** 4.3 - Social Icons ****
	************************/

	#socials a{ width:29px; height:26px; display:inline-block; }
	#socials #social_twitter{ background-image:url(../images/socials.png); background-repeat:no-repeat; background-position:0 0; }
	#socials #social_facebook { background-image:url(../images/socials.png); background-repeat:no-repeat; background-position:50% 0; }
	#socials #social_rss{ background-image:url(../images/socials.png); background-repeat:no-repeat; background-position:100% 0; }
	#socials #social_menu{ background-image:url(../images/menu.jpg); background-repeat:no-repeat;}
	#socials #social_logout { background-image:url(../images/logout.jpg); background-repeat:no-repeat;}
	
	/** Hover **/
	#socials #social_twitter:hover { background-position:0 100%; }
	#socials #social_facebook:hover { background-position:50% 100%; }
	#socials #social_rss:hover { background-position:100% 100%; }



/***********************
***** 5.0 Slider *********
*************************/

/* please see css/flexslider.css */


/***********************
***** 6. Content *********
*************************/

	/** Styles for Content **/
	.center-content{ text-align:center; clear:both; margin:2em auto; width:70%; }
	.center-content p{ font-size:1.3em; font-style:italic; }
	.center-content a{ color:#000; font-weight:700; text-transform:uppercase; }
	
	
	/***********************
	******** 6.1 - Call to Action Wrap (Fixed and Wide) ****
	************************/
	
		.orange-action-box{ background-color:#e76d04; }
		.orange-action-box p, .orange-action-box h3 { color:#fff !important; }
		
	.grey-action-box{ background-color:#f0eeef; border-bottom:2px solid #e5e5e5; }
	
	.call-to-action-wide{ 
		 width:100%; float:none; clear:both;
		/* Transition Effect */
		-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; 
		-ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
	}
		.call-to-action-wide .call-to-action-fixed{ border:none; margin-bottom:0; }		
		/* .call-to-action-wide:hover{background-color:#51c6c6;} */
			
	.call-to-action-fixed{ border-bottom:1px solid #f5f5f6; max-width:980px; margin:0 auto 2em auto; padding-top:0.4em; padding-bottom:2em; position:relative; }
	.call-to-action-fixed h3{ padding:0; margin-bottom:0; }
	.call-to-action-fixed p{ color:#929191; }
	
	
	/*****************************************************************************
	******** 6.2 - Icon Box/Featured Services (Colorful and White Services Box) ****
	*******************************************************************************/
	
	/* see css/shortcodes-styles.css **/
	

	/********************************
	******** 6.3 - Recent Works ****
	*********************************/	
	
	.recent-work{ clear:both; text-align:center; background-color:#edecec; border-top:1px solid #e5e3e3; border-bottom:1px solid #e5e3e3; margin:0; padding:3em 0; }
	.recent-work h6{ color:#666; font-weight:700; text-transform:uppercase; }
	.recent-work a{ color:#666; }
	.recent-work ul.recent-portfolio-list{ margin:1.5em 0 2.5em 0; clear:both; overflow:hidden; }	
	
	/* For rollover styles of Recent-work :- see css/components.css */
	
	
	/********************************
	******** 6.4 - Recent Blog Posts ****
	*********************************/
	
	/** See css/blog.css for all css related to blog posts **/
	
	
	/********************************
	******** 6.5 - Featured Product Wrap ****
	*********************************/
	
	.featured-product-wrap{ padding:50px 0; }
	
	
	/******************************************************************
	******** 6.6 - Pages ***********************************************
	*****************************************************************/
	
		/***********************************
		******** 6.6.1 - Page Title Wrap *****
		************************************/
		
		#page-title-wrap{ clear:both; background:url(../images/header-bg.png) no-repeat bottom center; padding:1em 0; position:relative; width:100%; }
		
		#page-title-wrap 
		.page-title{ color:#fff !important; font-size:1.8em; }
		
		/* Bread Crumbs */
		#crumbs{
		display:inline-block;
		padding: 0 0.7em;
		background: rgba(90, 91, 91, 0.4);
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px; font-size: 0.90em;
		}
		
		#crumbs a:after{ content: "\f105"; font-family:FontAwesome; margin:0 0.5em; }
		#crumbs a{ color:#787777; text-decoration:none; }
		#crumbs a:hover { color:#ccc; }
		#crumbs .current{ color:#ccc; }
		
		
		/***********************************
		******** 6.6.2 - 404 Error Page *****
		************************************/
					
	
		.error_icon,
		.error_content{ display:block; }
		.error_icon span{ display:inline-block; position:relative; }
		
		.error_icon span.error-icon-four:before{content:"4"; color:#50c6c6; }
		.error_icon span.error-icon-zero:before{content:"0"; color:#6f7de8; }
		.error_icon span.exclamation-icon:before{content:"!"; color:#f8e040; }
		
		.error_page{ text-align:center; margin:1em auto 2em auto; color:#666; }
		.error_page h6{ color:#000; }
	
		/* Error page icon-size */
		.error_icon .error-icon-four,
		.error_icon .error-icon-zero,
		.error_icon .exclamation-icon{ font-size:8em; font-weight:300; line-height:0.6em; }		
		.error_icon .middle_text{ position:absolute; color:#6f7de8; text-align:center; font-size:0.07em; font-weight:700; top:3.3em; width:40px; padding:0.5em; left:1.2em; line-height:1em;}
	


		/*****************************
		***** 6.6.3 - Blog Page ********
		******************************/
	
		/** Please see :- css/blog.css **/
	
	
		/*****************************
		***** 6.6.4 - Contact Page ********
		******************************/
			
		.map-wrap{ display:block; padding:10px; border:1px solid #ccc; border-radius:2px; margin-bottom:2em; }
		
		.email-msg { position:absolute; text-align:center; color:#fff; margin-bottom:0 !important; z-index:99999 !important; }	
	
		
/***********************
***** 7.0  Footer *********
*************************/
	
	footer a { color:#dadada !important; text-decoration:none; }
	
	footer ul { padding:0; margin:0; list-style:none; }
	footer .colored-footer-row{ background-color:#717070; clear:both; overflow:hidden; padding:2.5em 0 3em 0; color:#c5c3c3; }
	footer .widget_title{ color:#fff; }
		
	/* Col 2 : Recent Posts */	
	.recent_posts_widget li { border-bottom:1px solid #868585; padding:0.5em 0; }
	.recent_posts_widget li:last-child{ border-bottom:none; }
	.recent_posts_widget .recent_post_title{margin:0; padding:0; font-weight:400; }
	.recent_posts_widget .post-date{ color:#928f8f; font-style:italic; font-size:0.8em; }
			
	/* Col 3 : Social Icons */	
	ul.footer_socials li{ display:inline-block; }
	ul.footer_socials li a{ background-image:url(../images/footer_socials.png); width:26px; height:26px; display:inline-block; }
	
	ul.footer_socials li a.twitter{ display:inline-block; background-position:0 0; }
		ul.footer_socials li a.twitter:hover{background-position:0 bottom;}
	
	ul.footer_socials li a.facebook{ display:inline-block; background-position:12.5% 0; }
		ul.footer_socials li a.facebook:hover{background-position:12.5% bottom;}
		
	ul.footer_socials li a.google-plus{ display:inline-block; background-position:25% 0; }
		ul.footer_socials li a.google-plus:hover{background-position:25% bottom;}
		
	ul.footer_socials li a.rss { display:inline-block; background-position:37% 0; }
		ul.footer_socials li a.rss:hover { background-position:37% bottom; }
	
	ul.footer_socials li a.pinterest { display:inline-block; background-position:50% 0; }
		ul.footer_socials li a.pinterest:hover { background-position:50% bottom; }
	
	ul.footer_socials li a.linkedin { display:inline-block; background-position:62% 0; }
		ul.footer_socials li a.linkedin:hover { background-position:62% bottom; }
		
	ul.footer_socials li a.flickr { display:inline-block; background-position:74.5% 0; }
		ul.footer_socials li a.flickr:hover { background-position:74.5% bottom; }
	
	ul.footer_socials li a.dribbble { display:inline-block; background-position:86.5% 0; }
		ul.footer_socials li a.dribbble:hover { background-position:86.5% bottom; }
		
	ul.footer_socials li a.instagram { display:inline-block; background-position:99% 0; }
		ul.footer_socials li a.instagram:hover { background-position:99% bottom; }

	
	/* Col 4 : Recent Work List */	
	footer .recent_works_widget{ }
	.recent_works_widget li{ 
		width:70px; height:70px; margin:4px 4px 4px 0 !important; display:inline-block; background:#f7e040 url(../images/plus.png) no-repeat 50% 50%;		
	 }
	.recent_works_widget li:hover img{ 
		opacity:0.1; 
		/* Transition Effect */
		-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; 
		-ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; 
	}
		
	
	/* Extream Footer */		
	footer .extream-footer-row{ background-color:#201f1f; color:#b7b7b7; text-align:center; padding:1.5em 0;}
	
	
	
/******************************
***** 8.0  Media Queries *********
*************************/

	
	/* Up to Mobile Landscape Size */
	@media only screen and (max-width: 479px) {
						
		#logo{ padding-top: 0.7em;} #logo img{ width:90%; }
		#socials{position:absolute; top:4em; left:7%; padding:0.4em 0; z-index:9999; width:100px; height:40px; }
		
	}
	
	@media screen and (max-width: 960px) {
		.content-skeleton{ padding:0 8%; }
		/* Recent work - 2 column */
		.recent-work ul.recent-portfolio-list li{ width:50%; float:left; }
	}

	/* Upwards of Mobile Landscape Size  */
	@media only screen and (min-width: 480px) {
		#crumbs{ position:absolute; right:0; top:0; }
	}
	/* Tablet Portrait */
	@media only screen and (min-width: 768px) {
	
	}
	
	/* Max Screen size 960 */
	@media screen and (max-width: 960px) {
	}
		
	/* Beyond standard 960 */
	@media only screen and (min-width: 960px) {
	
		/* Typography */
		h1 { font-size: 2em; line-height:1.250em; margin: 0.625em 0;}
		h2 { font-size:2.2em; margin: 1em 0; line-height:1.2em; position:relative;}	
		h3 {font-size: 1.8em; line-height:1.2em;}
		h4 {font-size: 1.3em;}	
		h5 {font-size: 1.22em;}	
		h6 {font-size: 1em;}
		
		/** Margins and Paddings / Only for Big Screen Sizes **/
		.m_top_none{ margin-top:0 !important; }
		.m_bot_none{ margin-bottom:0 !important; }
		.m-bot-max{ margin-bottom:100px !important; }
		.m-bot{ margin-bottom:50px !important;}
		
		/** Paddings **/
		.p_top_max{ padding-top:5em !important; }
		.p_top_none{ margin-bottom:0 !important; }

		
		#logo{margin-bottom:14px; padding:1.6em 0 0 0; text-align:left;}			
		#socials{position:absolute; top:3em; right:0; padding:0;}
	
		header#page-header{ clear:both; padding:0;}		
		
		/* Call to action */
		.call-to-action-fixed h3,
		.call-to-action-fixed p{ padding-right:280px; }
		.call-to-action-fixed .button{ position:absolute; top:1.5em; right:0; }
		
		/* Recent work - 4 column */
		.recent-work ul.recent-portfolio-list li{ width:25%; float:left; margin-left:-0.1px; }
		
		/* Error Page */
		.error_page{ text-align:left; max-width:900px; margin:2em auto 7em auto; }
		.error_icon{ float:left; width:72%;}
		.error_content{float:left; width:28%;}
		.error_icon .error-icon-four,
		.error_icon .error-icon-zero,
		.error_icon .exclamation-icon{ font-size:25em; line-height:0.6em; }
		
		.error_icon .middle_text{ font-size:0.05em; top:4.7em; padding:0.5em; width:80px; left:3.4em; }
		
		/* Dividing Footer Columns */		
		footer .colored-footer-row article#about{width:25%; float:left; margin-right:5%; }
		footer .colored-footer-row article#footer-recent-posts{width:25%; float:left;}
		footer .colored-footer-row article#footer-socials{width:10%; float:left; margin:0 4% 0 6%; }		
		footer .colored-footer-row article#footer-recent-works{ width:24%; float:right; margin-left:1%; }
		
		footer .colored-footer-row{ text-align:left; }
		footer .widget_title{ margin-top:0; }
		
		.some_blank_space{ height:80px; }
		
		/** Portfolio Detail **/
		#primary-portfolio-area{ width:73%; float:left; margin-left:2%; }
				
	}
	
	/* big screen */
	@media only screen and (min-width: 1220px) {

	}
	
	@media only screen and (min-width: 1420px) {
				
				
					
	}


	.rating-box{ border: 1px solid #ccc; padding: 20px; font-size: 22px; min-width: 10px; float: left; margin-top: 30px; }
	.rating-box-2{ margin-top: 20px;float: left;margin-left: 10px; }
	.titlePageSprite{background-image:url('../images/icon-back.png');display:inline-block;vertical-align:middle}
	.star-box-giga-star{margin-top:20px;background-position:-180px -71px;width:72px;height:66px;line-height:66px;display:inline-block;text-align:center;vertical-align:middle;font-size:15px;font-weight:bold;color:black;font-family:tahoma;float:left;padding-right:5px}

	.metro2{
	  width: 250px;
	  position: absolute;
	  top: 1.5em;
	  right: 0;
	  border: 1px solid #e6f5fc;
	  padding: 0 10px 10px 10px;
	}

	.mb-7{ margin-bottom: 7px; width: 100%; }
	.avatar-member{ width: 60px;height: 60px;border-radius: 50%;}